<template>
  <div class="wrap">
    <p class="p1" v-if="flag == false">商品管理 -- 修改商品</p>
    <p class="p1" v-if="flag == true">商品管理 -- 添加商品</p>

    <div class="body">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="form.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="options" value-key="id" @change="change">
            <el-option
              v-for="item in option"
              :key="item.id"
              :label="item.name"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            v-model="options2"
            value-key="id"
            v-if="optionFlag != true"
          >
            <el-option
              v-for="item in option2"
              :key="item.id"
              :label="item.name"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number
            v-model="form.price"
            controls-position="right"
            :min="1"
          ></el-input-number>
          <span>元</span>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input-number
            v-model="form.stock"
            controls-position="right"
            :min="1"
          ></el-input-number>
          <span>件</span>
        </el-form-item>
        <el-form-item label="商品图片">
          <!-- :limit="1" 
            :on-exceed="handleExceed" -->
          <!-- 限制图片  个数 返回值 -->
          <el-upload
            class="upload-demo"
            name="upload_file"
            action="api/product/upload.do"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            list-type="picture"
            :file-list="fileList"
          >
            <!--  -->
            <!-- <div class="img" >
              <img v-for="(item,index) in src" :key="index" :src="item" alt="" disabled />
          </div> -->
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品详情">
          <!-- <el-input v-html="form.detail" class="price"></el-input> -->
          <el-input type="textarea" v-model="form.detail"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getsave, getdetail, getcategory } from "@/utils/request.js";
export default {
  name: "Save",
  data() {
    return {
      flag: false,
      productId: "",
      categoryId: "",
      form: {},
      option: [],
      option2: [],
      options: "",
      options2: "",
      optionFlag: true,
      fileList: [],
      src: [],
    };
  },
  created() {
    if (!this.$route.query.id) {
      this.flag = true;
      getcategory(0).then((res) => {
        this.option = res.data;
      });
    } else {
      this.flag = false;
      this.productId = this.$route.query.id;
      this.getlist();
      this.getcate();
    }
  },
  mounted() {},
  methods: {
    getlist() {
      getdetail(this.productId).then((res) => {
        // console.log(res);
        this.form = res.data;
        // console.log(this.form);
        // 将图片地址字符串截取转为数组 循环渲染到页面
        let arr = res.data.subImages.split(",");
        arr.forEach((item) => {
          this.fileList.push({ url: `${res.data.imageHost}${item}` });
        });
        this.categoryId = res.data.categoryId;
        this.getgory();
      });
    },
    // 一级菜单
    getcate() {
      getcategory(0).then((res) => {
        this.option = res.data;
        this.options = this.option[this.productId].name;
      });
    },
    // 二级菜单
    getgory() {
      getcategory(this.categoryId).then((res) => {
        console.log(res);
        if (res.data == "") {
          this.optionFlag = true;
        } else {
          this.optionFlag = false;
          this.option2 = res.data;
          this.options2 = this.option2[0].name;
        }
      });
    },
    // 监听下拉菜单值的变化
    change(e) {
      console.log(e);
      this.categoryId = e.id;
      this.getgory();
    },
    onSubmit() {
      console.log(this.form);
      let vm = this.form;
      let obj = {
        categoryId: vm.categoryId,
        name: vm.name,
        subtitle: vm.subtitle,
        mainImage: vm.mainImage,
        subImages: vm.subImages,
        detail: vm.detail,
        price: vm.price,
        stock: vm.stock,
        status: 1,
        id: vm.id,
      };
      if (this.flag == false) {
        // if (this.fileList != []) {
        //    console.log(obj);
        // }else{
          getsave(obj).then((res) => {
            console.log(res);
            alert("更新产品成功");
            this.$router.push("/product");
            return;
          });
        //    console.log(obj);
        // }
      } else {
        obj.categoryId = this.categoryId;
        if (
          !obj.name &
          !obj.subtitle &
          !obj.price &
          !obj.stock &
          !obj.detail &
          !obj.categoryId
        ) {
          alert("不能为空，请输入完整");
          return;
        } else {
          getsave(obj).then((res) => {
            alert("新增产品成功");
            this.$router.push("/product");
            return;
          });
          //  console.log(obj);
        }
      }
      console.log(obj);
    },
    // 图片删除
    handleRemove(file, fileList) {
      // console.log(fileList);
      let arr =""
      fileList.forEach((item) => {
        let as = item.url.slice(26,item.url.length)
        arr = `${arr},${as}`
      })
    //  console.log(fileList);
    this.form.mainImage = arr
    this.form.subImages = arr
    // console.log(this.form.mainImage);
    },
    // 图片 点击
    handlePreview(file) {
      //   console.log(file);
    },
    // 监听上传成功时的数据
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(fileList);
      // console.log(this.form.subImages);
      // 图片拼接地址
      this.form.subImages = `${this.form.subImages},${response.data.uri}`;
      this.form.mainImage = `${this.form.subImages},${response.data.uri}`;
      //  console.log(this.form.subImages);
    },
    // 限制图片
    // handleExceed(files, fileList) {
    //   this.$message.warning(
    //     `当前限制选择 1个文件，本次选择了 ${
    //       files.length
    //     } 个文件，共选择了 ${files.length + fileList.length} 个文件`
    //   );
    // },
  },
  components: {},
  //   watch: {
  //       options: {
  //           deep: true,
  //           // immediate: true,
  //           handler(newVal, oldVal) {
  //               console.log(newVal);
  //                 this.option.forEach((item) => {
  //                   if(item.name == newVal){
  //                       console.log(item.id);
  //                   }
  //               })
  //           },
  //       },
  //   },
};
</script>

<style lang="scss" scoped>
.wrap {
  .p1 {
    text-align: left;
    font-size: 40px;
    margin: 10px 0 20px 0;
  }
  .body {
    width: 600px;
    margin: 120px auto;
    text-align: left;
    .price {
      width: 300px;
    }
    span {
      display: inline-block;
      width: 40px;
      height: 40px;
      border: 1px solid #ccc;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      text-align: center;
      margin-left: -1px;
    }
    //  .img {
    //     width: 100%;
    //     height: 200px;
    img {
      width: 100px;
      height: 100px;
    }
    // }
  }
}
</style>
